<template>
	<view>
		<view class="center" v-if="list.length != 0">
			<view class="orig">
				<view class="left">
					<text>{{list[0].ctitle}}</text> <br>
					<text>{{list[0].etitle}}</text>
				</view>
				<navigator :url="`product/index?Id=${list[0].id}`">
					<!-- 	<navigator :url="`product/index?Id=`+list[0].id"> -->
					<image :src="list[0].img"></image>
				</navigator>



			</view>

			<view class="dec">
				<view class="left">
					<text>{{list[1].ctitle}}</text> <br>
					<text>{{list[1].etitle}}</text>
				</view>
				<!-- 			<navigator :url="`product/index?Id=${list[1].id}`"> -->
				<navigator :url="`product/index?Id=`+list[1].id">
					<image :src="list[1].img"></image>
				</navigator>



			</view>


			<view class="sty">
				<navigator :url="`product/index?Id=${list[2].id}`">
					<image :src="list[2].img" mode=""></image>

				</navigator>


				<text class="t1">{{list[2].ctitle}}</text> <br>
				<text class="t2">{{list[2].etitle}}</text>
			</view>

			<view class="the">
				<navigator :url="`product/index?Id=`+list[3].id">
					<image :src="list[3].img" mode=""></image>
				</navigator>



				<text class="t1">{{list[3].ctitle}}</text> <br>
				<text class="t2">{{list[3].etitle}}</text>
			</view>

		</view>
	</view>
</template>

<script>
	import IndexApi from '@/api/index/index.js'
	export default {
		data() {
			return {
				list: []
			}
		},
		onLoad() {

		},
		methods: {
			init() {
				IndexApi.list().then((res) => {
					console.log(res)
					this.list = res.data.data
				})
			}
		},
		created() {
			this.init()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		background: #354e44;
	}



	.center {
		overflow: hidden;
		padding-bottom: 30rpx;

		background: #f1ece7;

		.orig {
			overflow: hidden;

			width: 670rpx;
			margin-left: 40rpx;
			margin-top: 64rpx;
			position: relative;
			height: 302rpx;
			background: #d5d5d5;
			border-radius: 20rpx;

			.left {
				background: #d5d5d5;
				float: left;
				margin-top: 148rpx;
				margin-left: 52rpx;

				text:nth-child(1) {
					font-size: 48rpx;
					color: #3E3E3E;
					font-weight: bold;
					letter-spacing: 3.43rpx;
				}

				text:nth-child(2) {
					font-size: 30rpx;
					color: #878787;
					letter-spacing: 2.14rpx;
				}
			}

			image {
				position: absolute;
				right: 0;
				bottom: 0;
				height: 252rpx;
				width: 416rpx;
			}
		}

		.dec {
			background: #fff;
			width: 670rpx;
			border-radius: 20px;
			height: 302rpx;
			margin-left: 40rpx;
			position: relative;
			margin-top: 48rpx;

			.left {
				background: #fff;
				float: left;
				margin-top: 148rpx;
				margin-left: 52rpx;
				z-index: 9;

				text:nth-child(1) {
					font-size: 48rpx;
					font-weight: bold;

					letter-spacing: 3.43rpx;
				}

				text:nth-child(2) {
					font-size: 30rpx;
					color: #878787;

					letter-spacing: 2.14rpx;
				}
			}

			image {
				position: absolute;
				border-radius: 20px;
				right: 0;
				bottom: 0;
				height: 302rpx;
				width: 400rpx;
			}
		}
	}



	.sty {
		border-radius: 20px 20px;
		margin-top: 48rpx;
		width: 312rpx;
		position: relative;
		height: 442rpx;
		float: left;
		background: #f1ece7;
		margin-left: 46rpx;

		image {
			width: 312rpx;
			height: 442rpx;
			border-radius: 20px;
		}

		.t1 {
			position: absolute;
			left: 52rpx;
			top: 280rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #3E3E3E;
			letter-spacing: 3.43rpx;
		}

		.t2 {
			position: absolute;
			left: 52rpx;
			font-size: 30rpx;
			color: #7F7F7F;
			letter-spacing: 2.14rpx;
			top: 352rpx;
		}
	}

	.the {
		border-radius: 20px;
		position: relative;
		margin-top: 48rpx;
		float: right;
		width: 312rpx;
		background: #f1ece7;
		height: 442rpx;
		margin-right: 40rpx;

		image {
			width: 312rpx;
			height: 442rpx;
			border-radius: 20px;
		}

		.t1 {
			position: absolute;
			left: 52rpx;
			top: 280rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #3E3E3E;
			letter-spacing: 3.43rpx;
		}

		.t2 {
			position: absolute;
			left: 52rpx;
			font-size: 30rpx;
			color: #7F7F7F;
			letter-spacing: 2.14rpx;
			top: 352rpx;
		}
	}
</style>
